<template>
<view :style="{height:height+'px'}" class="mainBoxBG refundMainBox">
  <view class="refund">
    <view class="refundDetail" @tap="popReason">
      <view>退款原因</view>
      <view class="selectReason" >
        {{ form.reason }}
      </view>
    </view>
    <view class="line-division" />
    <view class="refundDetail">
      <view>退款数量</view>
      <view class="selectReason" style="width: 100rpx;margin-right: 30rpx">{{ count }}</view>
    </view>
    <view class="line-division" />
    <view class="refundDetail">
      <view>退款金额</view>
      <view class="amount">{{ amount }}</view>
    </view>
  </view>
  <view class="submit" @tap="save">提交</view>
  <uni-popup ref="popup" type="bottom">
    <view class="reasonBox">
      <view class="title">退款原因</view>
      <scroll-view style="height: 600rpx"  scroll-y>
      <view class="content">
        <view v-for="item in reasonList" class="reasonItem" @tap="setCurReason(item)">
          <view class="flex j-content-between" style="width: 100%">
            <view  class="reasonValue" >{{ item }}</view>
            <view  :class="item===currentReason?'curSelect':'select'"/>
          </view>
        </view>
      </view>
      </scroll-view>
      <view class="submit" @tap="setFormReason" style="margin: 20rpx">
        完成
      </view>
    </view>
  </uni-popup>
</view>
</template>

<script>
import {getScreen} from "../../service/auth";
import {refundApply} from "@/service/api/refund";

export default {
  name: "refund",
  data(){
    return{
      height: 0,
      reasonList:[
        '不需要了',
        '店铺/商品问题',
        '重新购买',
        '商家无法提供服务',
        '消费结果不满意',
        '使用其他方式付款',
        '价格不划算',
        '没时间消费',
        '其他',
      ],
      currentReason:'',
      form:{
        reason:'请选择'
      },
      count:'',
      amount:0
    }
  },
  onLoad(option){
    this.count = this.computedNum(Number(option.boxNum),Number(option.mainNum))
    this.amount= option.amount
    this.orderId = Number(option.orderId)
  },
  created() {
    const { height } = getScreen()
    this.height = height
  },
  methods:{
    popReason(){
      this.$refs.popup.open()
    },
    save(){
        if (!this.currentReason)return uni.showToast({title:'请先选择退款原因',icon:'none'})
        uni.showLoading({title:'提交中'})
        refundApply({orderId:this.orderId,refundReason:this.currentReason}).then(res=>{
            uni.hideLoading()
            if (res.status === 200){
                uni.navigateBack()
            }else {
                uni.showModal({title:'提示',content:res.msg})
            }
        })
    },
    computedNum(a,b){
      let str = ''
      if (a)str+=`箱数:${a}`
      if (b)str+=`零数:${b}`
      return str
    },
    setCurReason(e){
      this.currentReason = e
    },
    setFormReason(){
      this.form.reason = this.currentReason
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.refundMainBox{
  padding: 20rpx;
  .reasonBox{
    background: white;
    border-radius: 40rpx 40rpx 0 0;
    height: 800rpx;
    .title{
      font-size: 38rpx;
      display: flex;
      justify-content: center;
      height: 80rpx;
      align-items: center;
    }
    .content{
      padding: 0 20rpx;
      .reasonItem{
        height:100rpx;
        display: flex;
        border-bottom: rgba(200,200,200,0.3) 1px solid;
        flex-direction: column;
        justify-content: center;
        .reasonValue{
          width: 80%;
        }
        .select{
          width: 40rpx;
          height: 40rpx;
          border: #D1D1D1 1px solid;
          border-radius: 40rpx;
        }
      }
    }
  }
  .refund{
    width: 715rpx;
    margin: auto;
    border-radius: 20rpx;
    background: white;
    padding: 20rpx 40rpx;
  .line-division{
    border-bottom: rgba(200,200,200,0.3) 1px solid !important;
  }
    .refundDetail{
      height: 90rpx;
      font-size:35rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
      .selectReason{
        width: 130rpx;
        font-size: 32rpx;
        color: #878787;
        margin-right: 30rpx;
        text-align: end;
      }
      .amount{
        width: 100rpx;
        text-align: right;
        font-size: 35rpx;
        color: #E85F23;
        font-weight: bold;
        margin-right: 40rpx;
        &:before{
          content: '￥';
          font-size: 25rpx;
        }
      }
    }
  }
  .submit{
    position: fixed;
    bottom: 10rpx;
    background:linear-gradient(to right,#EB9028,#F25920);
    width: 700rpx;
    height: 80rpx;
    border-radius: 80rpx;
    color: white;
    font-size: 38rpx;
    line-height: 80rpx;
    text-align: center;
  }
  .curSelect{
    background:linear-gradient(to right,#EB9028,#F25920);
    @extend .select;
    &:before{
      content: '✓';
      color: white;
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      margin: auto;
    }
  }
}

</style>
